<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 2 -->
    <h4 id="demo2">Custom Animation. Easing Effects.</h4><hr>

    <p>
        Easing effect is the best thing that happened to jQuery, after jQuery itself.
        If you prefer the carousel to animate using an easing effect, all you need to do is supply one.
        For instance this one uses "bounceout".<br>
        Note: You need the <a href="https://github.com/gdsmith/jquery.easing" target="_blank">easing plugin</a> for this to work.
    </p>

    <div class="custom-container bounceout">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel" style="visibility:hidden; left:-5000px;">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".bounceout .carousel").jCarouselLite({
    btnNext: ".bounceout .next",
    btnPrev: ".bounceout .prev",
    easing: "easeOutBounce",
    speed: 1000
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".bounceout .carousel").jCarouselLite({
                btnNext: ".bounceout .next",
                btnPrev: ".bounceout .prev",
                easing: "easeOutBounce",
                speed: 1000
            });
        });
    </script>

</div>
</body>
</html>